<@c.html>
    <div class="row">
        <div>
            <input type="file" id="input-id" multiple value="/upload/Lighthouse.jpg"/>
        </div>
        <div>
            <button class="btn btn-primary" type="button" id="submit">提交</button>
        </div>
    </div>
</@c.html>
<script type="text/javascript">

    function initFileInput(ctrlName){

    }

    $(function(){
        $('input[type="file"]').each(function(){
            initInputFile($(this));
        });

        $('#submit').click(function(){
            var url = $('#input-id').data("url");
            console.log(url);
        });

        function initInputFile($input){
            var initialPreview = [];
            var initialPreviewConfig = [];
            var urls = $input.attr("value");
            if(urls){
                $input.data("url", urls.split(","));
                $.each(urls.split(","),function(i, url){
                    initialPreview.push(url);
                    initialPreviewConfig.push({key:url})
                });
            }else{
                $input.data("url", []);
            }

            var overwriteInitial = true;
            var is_multiple = false;

            if($input.attr("multiple")){
                overwriteInitial = false;
                is_multiple = true;
            }

            $input.fileinput({
                language: 'zh',
                uploadUrl : "/upload",
                deleteUrl : "/delete",
                showUpload: true,
                showRemove: true,
                allowedPreviewTypes: ['image'],
                allowedFileTypes: ['image'],
                allowedFileExtensions:  ['jpg', 'png'],
                maxFileSize : 2000,
                initialPreview :initialPreview,
                initialPreviewConfig : initialPreviewConfig,
                initialPreviewAsData : true,
                overwriteInitial : overwriteInitial
//            defaultPreviewContent: '<img src="/upload/default_avatar_male.jpg" alt="Your Avatar">',
            }).on("filebatchselected", function(event, files) {
                //$(this).fileinput("upload");
            }).on('fileuploaded', function(event, data, previewId, index) {
                var form = data.form, files = data.files, extra = data.extra,
                        response = data.response, reader = data.reader;
                if(is_multiple){
                    $(this).data("url").push(response.url[0]);
                }else{
                    $(this).data("url", [response.url[0]])
                }
            }).on('filedeleted', function(event, key, jqXHR, data) {
                console.log('Key = ' + key);
                var url = $(this).data("url");
                url.splice($.inArray(key,url),1);
                $(this).data("url", url);
            }).on('fileimagesloaded', function(event) {
                console.log("fileimagesloaded");
            });
        }
    });
</script>
